<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <th:block th:include="include :: header('添加角色')"/>
    <th:block th:include="include :: headertable"/>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:850px;height:660px;"></div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: footertable"/>
</body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var datatime = [], datavalue = [];
    $.ajax({
        url: "/ht/lineChart.json",
        type: "GET",
        data: {code: "03"},
        success: function (result) {
           // console.log(result)
            if (result.status=='200') {
               // console.log(result)

                var  data = result.rows;
                for (var i = 0; i < data.length; i++) {
                    datatime.push(data[i].createTime);
                    datavalue.push(data[i].value);
                }

                var option = {
                    title: {},
                    tooltip: {},
                    legend: {
                        data: ['区域1之房间之γ剂量率-1']
                    },
                    xAxis: {
                        data: datatime,
                        name:'时间',
                        nameLocation: 'center',
                        nameGap :60,
                        axisLabel: {
                            interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                            rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#224,230,241'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    yAxis: {
                        name: 'γ剂量率(μSv/h)',
                        nameLocation: 'center',
                        nameGap :50
                    },
                    series: [
                        {
                            name: '区域1之房间之γ剂量率-1',
                            type: 'line',
                            data: datavalue
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    });

    // 基于准备好的dom，初始化echarts实例

    // 指定图表的配置项和数据

    // 使用刚指定的配置项和数据显示图表。

</script>


<!--<script type="text/JavaScript">-->

    <!--function loadTwoLine() {-->
        <!--var myChart = echarts.init(document.getElementById('main'));-->
        <!--// 显示标题，图例和空的坐标轴-->
        <!--myChart.setOption({-->
            <!--title: {-->
                <!--text: '异步数据加载示例'-->
            <!--},-->
            <!--tooltip: {-->
                <!--trigger: 'axis'-->
            <!--},-->
            <!--legend: {-->
                <!--data: ['区域1之房间之Y剂量率-1']-->
            <!--},-->
            <!--toolbox: {-->
                <!--show: true,-->
                <!--feature: {-->
                    <!--mark: { show: true },-->
                    <!--dataView: { show: true, readOnly: false },-->
                    <!--magicType: { show: true, type: ['line', 'bar'] },-->
                    <!--restore: { show: true },-->
                    <!--saveAsImage: { show: true }-->
                <!--}-->
            <!--},-->
            <!--calculable: true,-->
            <!--xAxis: {-->
                <!--type: 'category',-->
                <!--boundaryGap: false, //取消左侧的间距-->
                <!--data: []-->
            <!--},-->
            <!--yAxis: {-->
                <!--type: 'value',-->
                <!--splitLine: { show: false },//去除网格线-->
                <!--name: ''-->
            <!--},-->
            <!--series: [{-->
                    <!--name: '区域1之房间之Y剂量率-1',-->
                    <!--type: 'line',-->
                    <!--symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形-->
                    <!--data: []-->
                <!--}]-->
        <!--});-->
        <!--myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画-->
        <!--var names = [];    //类别数组（实际用来盛放X轴坐标值）-->
        <!--var series1 = [];-->
        <!--$.ajax({-->
            <!--type: 'get',-->
            <!--url: '/ht/revEquipmentDataList.json',//请求数据的地址-->
            <!--dataType: "json",        //返回数据形式为json-->
            <!--success: function (result) {-->
                <!--//请求成功时执行该函数内容，result即为服务器返回的json对象-->
               <!--$.each(result.createTime, function (index, item) {-->
                    <!--series2.push(item.createTime);-->
                <!--});-->
                <!--myChart.hideLoading();    //隐藏加载动画-->
                <!--myChart.setOption({        //加载数据图表-->
                    <!--xAxis: {-->
                        <!--data: names-->
                    <!--},-->
                    <!--series: [{-->
                        <!--data: series1-->
                    <!--}]-->
                <!--});-->
            <!--},-->
            <!--error: function (errorMsg) {-->
                <!--//请求失败时执行该函数-->
                <!--alert("图表请求数据失败!");-->
                <!--myChart.hideLoading();-->
            <!--}-->
        <!--});-->
    <!--};-->
    <!--loadTwoLine();-->
<!--</script>-->

</html>
